<template>
  <div class="goodslist">
    <left-menus active="2-1" openeds="2"></left-menus>
    <div class="goodslist-main">
      <Breadcrumb :title="title"></Breadcrumb>
      <div class="goodslist-main_content">
        <div>
          <div class="contenttitle">在售商品列表</div>
          <div class="goodslist-main_contentFirst">
            <el-table :data="tableData" style="width: 100%" border v-loading="loading">
              <!-- <el-table-column
                type="selection"
                width="55">
              </el-table-column>-->
              <el-table-column prop="pic" label="商品图片" align="center" width="100">
                <template slot-scope="scope">
                  <el-popover placement="right" title trigger="hover" prop="authSfzzm">
                    <img :src="scope.row.pic" style="width: 300px;" lazy />
                    <img
                      slot="reference"
                      :src="scope.row.pic"
                      alt
                      style="height:70px;width:70px"
                      lazy
                    />
                  </el-popover>
                  <!-- <el-image :src="scope.row.pic" style="width: 70px;height:70px" lazy></el-image> -->
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称" width="100">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                    <p class="ssl" style=" -webkit-box-orient: vertical;">{{scope.row.name}}</p>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="categoryName" label="商品类别">
                <span
                  slot-scope="scope"
                >{{scope.row.category1Name?(scope.row.category1Name+'/'):''}}{{scope.row.category2Name?(scope.row.category2Name+'/'):''}}{{scope.row.category3Name?(scope.row.category3Name):''}}</span>
              </el-table-column>
              <el-table-column prop="price" label="总价"></el-table-column>
              <el-table-column prop="currencyPriceRate" label="人民币">
                <span slot-scope="scope">{{(scope.row.price * scope.row.cnyPriceRate).toFixed(2)}}</span>
              </el-table-column>
              <el-table-column prop="defaultPic" label="积分">
                <span
                  slot-scope="scope"
                >{{(scope.row.price * scope.row.currencyPriceRate).toFixed(2)}}</span>
              </el-table-column>
              <el-table-column prop="sales" label="销量"></el-table-column>
              <el-table-column prop="stocks" label="库存">
                <template slot-scope="scope">
                  <p class="stocksTop">{{scope.row.stocks}}</p>
                  <div class="btn-pa">
                    <el-button type="text" @click="open(scope.row.id)">修改</el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="addTime" label="添加时间" width="100"></el-table-column>
              <el-table-column prop="upTime" label="上架时间" width="100"></el-table-column>
              <el-table-column prop="isFree" label="是否包邮">
                <template slot-scope="scope">
                  <span v-if="scope.row.isFree===1">包邮</span>
                  <span v-else>不包邮</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" plain @click="goodsDown(scope.row)">下架</el-button>
                  <el-button size="mini" @click="goodsEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="goodsDelete(scope.row)">删除</el-button>
                  <el-button size="mini" type="primary" @click="recommend(scope.row.id)">推荐</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="paging"
              align="right"
              @current-change="handleCurrentChange"
              :current-page.sync="curPage"
              hide-on-single-page
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="count"
            ></el-pagination>
            <el-dialog title="库存/价格修改" :visible.sync="dialogVisible" width="50%" center>
              <span>
                <div v-for="(item,index) in bage2" :key="index" class="guige">
                  <span style="marginRight:15px;">规格：{{item.name}}</span>
                  <span>
                    库存：
                    <el-input v-model="item.stock"></el-input>
                  </span>
                  <span>
                    价格：
                    <el-input v-model="item.price"></el-input>
                  </span>
                </div>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" style="margin:0 15px">取 消</el-button>
                <el-button type="primary" @click="updateSpecs" style="margin:0 15px">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible1"
      width="55%"
      class="coll-dialog1"
      title="溯源信息"
      v-loading="loadingTrace"
    >
      <span v-if="traceList.goodsInfo">
        <div class="coll-dialog1_way">
          <h3>商品信息</h3>
          <div class="coll-dialog1_main">
            <div>
              <p>
                <span>商品类别：</span>
                {{traceList.goodsInfo.level1Name / traceList.goodsInfo.level2Name / traceList.goodsInfo.categoryName}}
              </p>
              <p>
                <span>商品标题：</span>
                {{traceList.goodsInfo.goodsTitle}}
              </p>
            </div>
            <div>
              <p>
                <span>品牌：</span>
                {{traceList.goodsInfo.brand}}
              </p>
              <p>
                <span>商品规格：</span>
                <el-select v-model="traceList.traceSpec" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in traceList.spesList1"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </p>
            </div>
          </div>
          <div>
            <div>
              <el-button type="text" @click="addBageShop">添加新的商品属性</el-button>
            </div>
            <div class="bageShop" v-for="(item,index) in bageShop" :key="index">
              <el-input v-model="item.name" placeholder="请输入属性名"></el-input>
              <el-input v-model="item.content" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </div>
        <div class="coll-dialog1_way">
          <h3>溯源配置</h3>
          <div class="coll-dialog1_main1">
            <p>溯源批次：{{traceList.batchId}}</p>
            <div class="coll-dialog1_input">
              <p>
                <span style="color:red;">*</span>
                溯源数量：
              </p>
              <el-input v-model="traceList.traceNum" placeholder="请填写生成溯源码数量"></el-input>
            </div>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer btn-foot">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="goToTrace">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import LeftMenus from "@/views/components/leftMenus";
import Breadcrumb from "@/views/components/Breadcrumb";
import { mapState } from "vuex";
import { getTime } from "@/utils/service.js";
export default {
  data() {
    return {
      title: {
        group: "商品管理",
        name: "商品列表",
      },
      bage2: [],
      dialogVisible: false,
      dialogVisible1: false,
      active: 1,
      count: null,
      curPage: 1,
      pageSize: 10,
      loading: false,
      tableData: [],
      list: [],
      traceList: {
        traceNum: null,
        traceSpec: "",
      },
      loadingTrace: false,
      bageShop: [],
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    addBageShop() {
      this.bageShop.push({ name: "", content: "" });
    },
    openTrace(id) {
      this.dialogVisible1 = true;
      this.bageShop = [];
      this.getBaseTraceProductInfo(id);
    },
    async oPStoreRecommend(id) {
      let obj = {
        goodsId: id,
        storeId: this.print.storeId,
        type: 0,
      };
      const res = await this.axios.oPStoreRecommend(obj);
      if (res.data.code == 200) {
        this.$message.success("添加成功");
      } else {
        this.$message.warning(res.data.message);
      }
    },
    recommend(id) {
      // 推荐
      this.$confirm("确认设为推荐吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.oPStoreRecommend(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    goToTrace() {
      // 溯源按钮
      // this.dialogVisible1 = false
      let obj = {
        num: this.traceList.traceNum,
        spesList: this.traceList.spesList[this.traceList.traceSpec],
        batchId: this.traceList.batchId,
      };
      console.log(obj);
    },
    async getBaseTraceProductInfo(id) {
      this.loadingTrace = true;
      const res = await this.axios.getBaseTraceProductInfo(id);
      this.loadingTrace = false;
      if (res.data.code == 200) {
        this.traceList = res.data.data;
        this.traceList.spesList1 = [];
        let arr,
          arr2 = [];
        this.traceList.spesList.map((el) => {
          arr = el.split("{")[1].split("}")[0].split('"');
          arr2 = arr.join("");
          this.traceList.spesList1.push(arr2);
        });
      } else {
        this.$message.warning(res.data.msg);
        this.dialogVisible1 = false;
      }
    },
    async getGoodsList() {
      // 获取商品列表
      let obj = {
        storeId: parseInt(this.print.id),
        status: 1,
        page: this.curPage,
        addTimeOrder: 1,
      };
      this.loading = true;
      const res = await this.axios.getGoodsList(obj);
      this.loading = false;
      if (res.data.code === 200) {
        this.tableData = res.data.data.list;
        this.tableData.map((el) => {
          el.addTime = el.addTime ? getTime(el.addTime) : el.addTime;
          el.upTime = el.upTime ? getTime(el.upTime) : el.upTime;
        });
        this.count = parseInt(res.data.data.count);
      }
    },
    async goodShelves(id) {
      // 下架商品
      let obj = {
        id: parseInt(id),
        type: 0,
      };
      const res = await this.axios.goodShelves(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "下架成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.getGoodsList();
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async delGoods(id) {
      // 删除商品
      let obj = {
        id: parseInt(id),
      };
      const res = await this.axios.delGoods(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.getGoodsList();
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async open(id) {
      this.dialogVisible = true;
      this.bage2 = [];
      const res = await this.axios.findGoods({ id });
      this.list = res.data.data.list;
      if (this.list[0].specsDes.split('"')[3] === "默认规格") {
        let obj = {
          name: "默认规格",
          stock: this.list[0].stock,
          price: this.list[0].price,
        };
        this.bage2.push(obj);
      } else {
        this.list.forEach((el) => {
          let arr = [];
          el.specsDesJSONObject = JSON.parse(el.specsDes);
          for (var i in el.specsDesJSONObject) {
            arr.push(el.specsDesJSONObject[i]);
          }
          let obj = {
            name: arr.toString(),
            stock: el.stock,
            price: el.price,
          };
          this.bage2.push(obj);
        });
      }
    },
    async updateSpecs() {
      let obj = { list: [] };
      this.list.map((el, index) => {
        this.list[index].stock = this.bage2[index].stock;
        this.list[index].price = this.bage2[index].price;
      });
      this.list.map((el) => {
        obj.list.push({
          id: el.id,
          price: el.price,
          stock: el.stock,
        });
      });
      const res = await this.axios.updateSpecs(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dialogVisible = false;
            this.getGoodsList();
          },
        });
      } else {
        this.$message.error(res.data.message);
      }
    },
    goodsDown(row) {
      // 点击下架
      this.$confirm("确认下架吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.goodShelves(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    goodsEdit(row) {
      // 点击修改
      this.$router.push({
        path: "/commodity/goodsedit",
        query: { id: row.id },
      });
    },
    goodsDelete(row) {
      // 点击删除
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delGoods(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleCurrentChange(val) {
      // 改变当前页码重新获取数据
      this.curPage = val;
      this.getGoodsList();
    },
  },
  components: {
    LeftMenus,
    Breadcrumb,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.goodslist {
  display: flex;
  justify-content: center;
  .goodslist-main {
    background-color: #fff;
    padding: 10px;
    .goodslist-main_content {
      margin: 15px 0;
      border: 1px solid rgba(229, 230, 234, 1);
      border-top: 0;
      .contenttitle {
        box-sizing: border-box;
        padding: 10px;
        line-height: 28px;
        font-weight: bold;
        height: 50px;
        background-color: rgba(245, 245, 245, 1);
        border-top: 2px solid rgba(176, 184, 184, 1);
      }
      .goodslist-main_contentFirst {
        padding: 10px;
        /deep/ .el-button + .el-button {
          margin-left: 0;
          margin-top: 5px;
        }
      }
    }
  }
  .paging {
    margin-top: 50px;
  }
  .ssl {
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .stocksTop {
    margin-top: 18px;
  }
  .btn-pa /deep/ .el-button {
    padding: 0;
  }
  .guige {
    display: flex;
    justify-content: flex-start;
    span {
      /deep/ .el-input {
        width: 70%;
      }
      margin-bottom: 15px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 15px;
      font-weight: 700;
    }
  }
  .coll-dialog1 {
    /deep/ .el-icon-close:before {
      content: "\e78d";
      font-size: 25px;
    }
    .coll-dialog1_way {
      padding: 0 3%;
      line-height: 30px;
      h3 {
        color: #00baad;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
      }
      .coll-dialog1_main {
        padding: 2% 3%;
        padding-bottom: 0;
        width: 70%;
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(173, 168, 168);
          display: inline-block;
          min-width: 80px;
          text-align: justify;
        }
        /deep/ .el-input__inner {
          height: 30px;
          line-height: 30px;
        }
      }
      .coll-dialog1_main1 {
        padding: 2% 3%;
        .coll-dialog1_input {
          display: flex;
          align-items: center;
          p {
            min-width: 81px;
            margin-left: -11px;
          }
          /deep/ .el-input__inner {
            height: 25px;
            line-height: 25px;
            width: 180px;
          }
        }
      }
      .bageShop {
        display: flex;
        margin-top: 10px;
        /deep/ .el-input {
          width: 168px;
          .el-input__inner {
            height: 30px;
            height: 30px;
            width: 150px;
          }
        }
        /deep/ .el-input + .el-input {
          width: 300px;
          .el-input__inner {
            width: 300px;
          }
        }
      }
    }
    .coll-dialog1_way + .coll-dialog1_way {
      margin-top: 65px;
    }
    .dialog-footer {
      padding-right: 10%;
    }
  }
}
</style>
